<template>
    <el-dialog
    :title="type"
    :visible.sync="dialogVisible"
    width="600px"
    center
    @open="closeDialog"
  >
    <div class="box">
      <p>
        <span style="color: #007bff; font-size: 18px;">
          ●
        </span>
         {{packageInfo.smsTypeName}}主账号剩余：
        <span style="color: #007bff;">{{ smsCount }}</span>
        条
      </p>
      <p>
        <span style="color: #ffaf53; font-size: 18px;">
          ●
        </span>
        此账号分配：
        <span class="border">
          <input v-model="count"  style="color: #007bff;" maxlength="10"></input>
          条
        </span>
      </p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="smsTransfer" :loading="loading">
        保 存
      </el-button>
      <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { smsTransfer,getSmsCountByType } from 'src/api/user'
export default {
  data() {
    return {
      dialogVisible: false,
      packageInfo:{},
      count:0,
      smsCount:'',
      loading:false,
    }
  },
  computed:{
    type(){
      if(this.packageInfo.smsType==0){ 
        return '分配行业短信'
      } 
       if(this.packageInfo.smsType==1){
        return '分配营销短信'
      } 
       if(this.packageInfo.smsType==2){
        return '分配会销短信'
      } 
    }
  },
  methods: {
    show(info,id) {
      // console.log(info,id)
      this.dialogVisible = true,
        this.packageInfo=info
        this.id=id
        this.getSmsCountByType(info.smsType)
    },
    getSmsCountByType(smsType){
      getSmsCountByType({smsType}).then((response)=>{
          if(response.code==20000){
            this.smsCount=response.data.smsCount
          }
      })
    },
    smsTransfer(){
      this.loading=true
        let data={
            smsType:this.packageInfo.smsType,
            userId:this.id,
            count:this.count
        }
        smsTransfer(data).then((response) => {
            if(response.code==20000){
                this.dialogVisible = false
                this.loading=false
                this.$message.success({
                message: '短信划拨成功',
                duration: 2000,
                center: true,
                })
                this.$emit('distributionSuccess')
            }
        })
        },
        closeDialog(){
            this.count=0
        }
  },
}
</script>

<style lang="scss" scoped>
.el-dialog {
  min-width: 300px;
}
.box {
  width: 300px;
  margin: 0 auto;
}
p {
  flex-wrap: 600;
  .border {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #e8e8e8;
  }
}
input {
  border: none;
  outline: none;
  display: inline-block;
  height: 30px;
  width: 100px;
}
</style>
